<template>
    <table border="1px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
            <th>号码</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item) in arr" :key="item.id">
            <td>{{ item.rolename }}</td>
            <td>{{ item.powers }}</td>
            <td>{{ item.describe }}</td>
            <td>{{ item.lasttime }}</td>
            <td><button @click="delet(item.id)">删除</button><button @click="amend()">修改</button></td>
        </tr>
    </table>
    <div>
           姓名：<input type="text" v-model="e">
           年龄：<input type="text" v-model="f">
           身高：<input type="text" v-model="d">
           体重：<input type="text" v-model="g">
           <button @click="add">添加</button>
    </div>
    <div>
           姓名：<input type="text" v-model="e">
           年龄：<input type="text" v-model="f">
           身高：<input type="text" v-model="d">
           体重：<input type="text" v-model="g">
           <button @click="add">修改</button>
    </div>
</template>
<script lang="ts">
import { onMounted } from 'vue';
import { ref } from 'vue';
import { reactive } from 'vue';
import { systwm_list } from '@/utlis/https'
export default{
    setup(){
        var arr =reactive([]) 
            let e = ref('')   
            let f = ref('')
            let d = ref('')
            let g = ref('')
            function add(){
                // arr.push({
                //     id:arr.length,
                //     name:e.value,
                //     age:f.value,
                //     height:d.value,
                //     width:g.value
                // })
                console.log(arr)
            }
            function delet(id:number){
            // let c = arr.findIndex(item => item.id == id)            
            // arr.splice(c,1)
            }  
            onMounted(()=>{
              systwm_list({
                page:1,            
                pagelimit:4  
              })
             .then((val:any)=>{
                 console.log(val)
                //   arr.splice(0, arr.length, val.data.data);
                 console.log(arr)
             })
             .catch((e:string)=>{
                 console.log(e)
             })
            })
             
    
            return {arr,add,e,f,d,g,delet}      
            
    },
    
}



</script>